<template>
  <div id="app">
    <transition :enter-active-class="enterAnimation" :leave-active-class="leaveAnimation">
      <keep-alive>
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data () {
    return {
      enterAnimation: '',
      leaveAnimation: '',
      animated: 'animate__animated animate__fast animate__',
    }
  },
  watch: {
    // 路由监听，切换不同的路由切换动画
    $route (to, from) {
      if (from.meta.index < to.meta.index) { // 前进
        this.routerForward()
      } else { // 后退
        this.routerBack()
      }
    }
  },
  methods: {
    routerForward () { // 路由前进
      this.leaveAnimation = this.animated + 'slideOutLeft'
      this.enterAnimation = this.animated + 'slideInRight'
    },

    routerBack () { // 路由后退
      this.leaveAnimation = this.animated + 'slideOutRight'
      this.enterAnimation = this.animated + 'slideInLeft'
    }
  },
};
</script>

<style>
#app {
  padding: 0 30px;
  max-width: 1200px;
  min-width: 750px;
  margin: 0 auto;
  position: static;
  z-index: 1;
}

@media screen and (max-width: 1000px) {
  #app {
    padding: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }
}
</style>
